@import '../style/index.scss';

$image-upload-prefix-cls: #{$anna-prefix}-image-upload;

.#{$image-upload-prefix-cls} {
  display: grid;
  grid-template-columns: repeat(auto-fill, 170rpx);
  row-gap: 20rpx;
  column-gap: 20rpx;
  &-add{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 170rpx;
    border-radius: 10rpx;
    background-color: #F7F7F7;
  }
  &-item{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 170rpx;
    border-radius: 10rpx;
    background-color: #e8e8e8;
    overflow: hidden;
    &-delete{
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      top: 5rpx;
      right: 5rpx;
      width: 30rpx;
      height: 30rpx;
      background-color: #999;
      opacity: 0.8;
      border-radius: 50%;
    }
    >image{
      width: 100%;
    }
  }
}
